import React, {Component} from 'react';
import CountDown from 'react-native-zycountdown';
import {
  Container,
  Header,
  Content,
  Card,
  CardItem,
  Left,
  Body,
  Right,
  Button,
  Icon,
  Title,
  Text,
} from 'native-base';
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

type Props = {};
export default class AppInit extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      thisCount: 30,
    };
  }
  componentDidMount() {
    // this.timeInterval = setInterval(() => {
    //   if (this.state.thisCount) {
    //     this.setState(prevState => ({
    //       thisCount: prevState.thisCount - 1,
    //     }));
    //   } else {
    //     this.timeInterval && clearInterval(this.timeInterval);
    //     this.setState({
    //       thisCount: 30,
    //     });
    //   }
    // }, 1000);
  }

  componentWillUnmount() {
    this.timeInterval && clearInterval(this.timeInterval);
  }
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button
              iconLeft
              light
              transparent
              onPress={() => this.props.navigation.goBack()}>
              <Icon name="arrow-left" />
            </Button>
          </Left>
          <Body>
            <Title>アプリ初期化画面</Title>
          </Body>
          <Right />
        </Header>
        <Body>
          <Text style={{color: 'red', fontSize: 30}}>
            WIFIの接続設定してください。
          </Text>
          <Text style={{color: 'red', fontSize: 30}}>
            {this.state.thisCount}秒後にWIFI接続状態を再チェックにします。
          </Text>
          {/* <CountDown
            count={10}
            title="待ち"
            frontText=""
            behindText="秒後にWIFIを再チェックする。"
            onClick={() => {
              return true;
            }}
            style={{
              backgroundColor: 'green',
              height: 50,
            }}
          /> */}
        </Body>
      </Container>
    );
  }
}
